<template>
  <div class="page">
    <!-- 分页组件 -->
    <el-pagination
      v-model:current-page="pageInfo.pageNumber"
      v-model:page-size="pageInfo.pageSize"
      :page-sizes="pageInfo.pageSizes"
      :small="pageInfo.small"
      :disabled="pageInfo.disabled"
      :background="pageInfo.background"
      :layout="pageInfo.layout"
      :total="pageInfo.total"
      prev-text="上一页"
      next-text="下一页"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts" name="Pagination">
import type { IPageObject, IPageDTO } from '@/types'
import { reactive, watch } from 'vue'

// 定义组件的选项
defineOptions({
  // 组件的名称
  name: 'Pagination',
  // 是否继承父组件的属性
  inheritAttrs: true
})
// 定义props接口，包含pageObject属性
interface IProps {
  pageObject: IPageObject
}

// 使用withDefaults函数为props添加默认值
const props = withDefaults(defineProps<IProps>(), {})

// 定义emits，包含pageChange事件
const emits = defineEmits<{
  (e: 'pageChange', data: IPageDTO): void
}>()

/**
 * 分页组件的响应式对象初始化
 */
const pageInfo = reactive<IPageObject>({
  pageNumber: 1, // 当前页码
  pageSize: 10, // 每页显示条数
  pageSizes: [10, 20, 30, 40], // 每页显示条数选项
  hideOnSinglePage: false, // 单页时隐藏分页器
  small: false, // 是否使用小型分页器
  disabled: false, // 是否禁用
  background: true, // 是否为分页按钮添加背景色
  layout: 'total, sizes, prev, pager, next, jumper', // 分页组件布局，子组件名用逗号分隔
  total: 0 // 总条目数
})

// 监听props.pageObject的变化，将新值赋给pageInfo
watch(
  () => props.pageObject,
  (newVal) => {
    Object.assign(pageInfo, newVal)
  },
  { immediate: true, deep: true }
)

// 处理每页显示条数变化事件
function handleSizeChange(val: number) {
  pageInfo.pageSize = val
  emits('pageChange', {
    pageNumber: pageInfo.pageNumber as number,
    pageSize: val as number
  })
}

// 处理当前页码变化事件
function handleCurrentChange(val: number) {
  pageInfo.pageNumber = val
  emits('pageChange', {
    pageNumber: val as number,
    pageSize: pageInfo.pageSize as number
  })
}
</script>

<style scoped lang="scss">
.page {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;

  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
